import { h } from 'vue';
import emitter from "@/utils/mitt";
import gamePng from "@/assets/map/gamer.png";
export function MinxfunCoulmns() {
  //   监测点位：表头
  // 内涝
  const nlcolumns = [
    {
      label: '序号',
      prop: 'xh',
      type: 'index',
      width: '60px',
    },
    {
      label: '监测值/m',
      prop: 'waterLevel',
    },
    {
      label: '报警阀值',
      prop: 'thresholdWaterLevel',
    },
    {
      label: '传感器',
      prop: 'sensorName',
    },
    {
      label: '监测点位',
      prop: 'deviceName',
    },
    {
      label: '状态值',
      prop: 'status',
      width: '70px',
      render: (row) => {
        const color = row.status === '报警' ? '#DA5A5A' : '#333333';
        return h(
          'span',
          {
            style: { color: color },
          },
          row.status
        );
      },
    },
    // {
    //   label: '监控点',
    //   prop: 'deviceName',
    // },
    // {
    //   label: '当前水位/m',
    //   prop: 'waterLevel',
    // },
    // {
    //   label: '预警阀值/m',
    //   prop: 'thresholdWaterLevel',
    // },
    // {
    //   label: '传感器',
    //   prop: 'sensorName',
    // },
  ];

  // 防火监测点位：只有监测点位
  const fjcolumns = [
    {
      label: '序号',
      prop: 'xh',
      type: 'index',
      width: '60px',
    },
    {
      label: '设备名称',
      prop: 'deviceName',
    },
    {
      label: '检测值/ °C',
      prop: 'temperature',
    },
    {
      label: '报警阀值',
      prop: 'thresholdTemperature',
      width: '80px',
    },
    {
      label: '检测点位',
      prop: 'deviceName',
    },
    {
      label: '状态值',
      prop: 'status',
      width: '70px',
      render: (row) => {
        const color = row.status === '报警' ? '#DA5A5A' : '#333333';
        return h(
          'span',
          {
            style: { color: color },
            onClick: (e) => handleSpanClickDirect(e, row),
          },
          row.status
        );
      },
    },
  ];

  // 潮位
  const cwcolumns = [
    {
      label: '序号',
      prop: 'xh',
    },
    {
      label: '视频设备',
      prop: 'deviceName',
    },
  ];

  // 垃圾倾倒：无监测点
  // 气象站
  const qxzcolumns = [
    {
      label: '观测点',
      prop: 'deviceName',
    },
    {
      label: '风速米/s',
      prop: 'windSpeed',
    },
    {
      label: '风向',
      prop: 'windDir',
    },
    {
      label: '温度',
      prop: 'temperature',
    },
    {
      label: '湿度',
      prop: 'humidity',
    },
    {
      label: 'PM2.5',
      prop: 'pm25',
    },
    {
      label: 'PM100',
      prop: 'pm100',
    },
    {
      label: '设备状态',
      prop: 'status',
    },
  ];

  // 水环境
  const shhjcolumns = [
    {
      label: '监测点',
      prop: 'gjd',
    },
    {
      label: '溶解氧',
      prop: 'wd',
    },
    {
      label: '高锰酸盐',
      prop: 'sd',
    },
    {
      label: '氨氮',
      prop: 'qy',
    },
    {
      label: '总磷',
      prop: 'zwx',
    },
    {
      label: '水质等级',
      prop: 'zwx',
    },
  ];

  // 噪音
  const zycolumns = [
    {
      label: '观测点',
      prop: 'deviceName',
    },
    {
      label: '实时噪音/分贝',
      prop: 'noise',
    },
    {
      label: '预警阀值/分贝',
      prop: 'thresholdNoise',
    },
  ];

  // 城管
  const cgzcolumns = [
    {
      label: "序号",
      prop: "xh",
      type: "index",
    },
    {
      label: '监测点',
      prop: 'deviceName',
    },
    // {
    //   label: '事件类型',
    //   prop: '-',
    // },
    // {
    //   label: '监控设备',
    //   prop: '-',
    // },

    // {
    //   label: '设备状态',
    //   prop: 'cameraState',
    //   format: true,
    //   render: (row) =>
    //     h(
    //       'span',
    //       {
    //         class: row.cameraState == '在线' ? 'online-span' : 'liveline-span',
    //         onClick: (e) => handleSpanClickDirect(e, row),
    //       },
    //       row.cameraState
    //     ),
    // },
    {
      label: "查看视频",
      prop: "cameraState",
      format: true,
      render: (row) =>
        h("img", {
          src: gamePng,
          style: { width: "20px", height: "18px", "margin-top": "4px" },
          onClick: (e) => handleSpanClickDirect(e, row),
        }),
    },
    // {
    //   label: '所属区域',
    //   prop: 'tagLable',
    // },
  ];

  // 治理场景字典对接
  const findSenceType = (typeValue) => {
    let type = '';
    // 字典需要和后端重新对一下
    switch (typeValue) {
      case 'nlfx':
        type = 'S06';
        break;
      case 'aqfh':
        type = 'S07';
        break;
      case 'cwjk':
        type = 'S08';
        break;
      case 'qxz':
        type = 'S05';
        break;
      case 'shhj':
        type = 'S04';
        break;
      case 'zy':
        type = 'S02';
        break;
      case 'cgz':
        type = 'S01';
        break;
      case 'crk':
        type = 'S10';
        break;
      case 'gkpw':
        type = 'S11';
        break;
      case 'ryjk':
        type = 'S09';
        break;
      case 'ddc':
        type = 'S12';
        break;
      default:
        type = 'S03';
        break;
    }
    return type;
  };

  const handleSpanClickDirect = (e, row) => {
    e.stopPropagation();
    console.log("直接点击处理:", row);
    // 处理点击逻辑
    emitter.emit("playMapVideo", row);
  };

  return {
    findSenceType,
    nlcolumns,
    fjcolumns,
    cwcolumns,
    qxzcolumns,
    shhjcolumns,
    zycolumns,
    cgzcolumns,
  };
}
